<template>
  <!-- <view class="page" :style="{ 'padding-top': `calc(25rpx + ${capsuleInfo?.bottom}px)` }"> </view> -->
  <view class="page">
    <view class="list" v-if="hasMessageComp">
      <view class="item content" @click="goList(item)" v-for="item in fixData">
        <view class="img1">
          <image v-if="item.type == 1" class="i" src="/static/alarm.png" mode="widthFix"></image>
          <image v-else class="i" src="/static/msg.png" mode="widthFix"></image>
          <view v-if="item.list.length" class="badge">{{ item.list.length }}</view>
        </view>

        <view class="info">
          <view class="title">{{ item.title }}</view>
          <view class="desc">{{ item.list.length ? item.list[0]['smsContent'] : '暂无新消息推送' }}</view>
        </view>
      </view>
      <!-- <view class="item content" @click="goList(2)">
        <view class="img2">
          <image class="i" src="/static/msg.png" mode="widthFix"></image>
          <view class="badge">1</view>
        </view>
        <view class="info">
          <view class="title">核销通知</view>
          <view class="desc">暂无新消息推送/您提交的合作商入驻已审核成功/失败</view>
        </view>
      </view> -->
    </view>

    <view v-else class="no_message">
      <image class="img" src="/static/no_message.png" mode="widthFix"></image>
      <text class="text">暂无新消息</text>
    </view>

    <view class="empty_box" :style="{ height: barHeight + 'px' }"></view>
  </view>

  <tabBar :current="1" @barHeight="setBarheight" />
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import tabBar from '../../components/tabbar/tabbar';
  import { queryMessage } from '../../apis/pages';
  import { useUserStore } from '../../store/user';

  const userStore = useUserStore();

  uni.hideTabBar();

  const dict = {
    1: '审核通知',
    2: '核销通知',
  };

  const pageData = ref('');

  const barHeight = ref('');

  const fixData = computed(() => {
    return Object.keys(pageData.value).map((key) => {
      return {
        title: dict[key],
        type: key,
        list: pageData.value[key],
      };
    });
  });

  // 是否有消息
  const hasMessageComp = computed(() => {
    return Object.keys(pageData.value).some((key) => pageData.value[key].length > 0);
  });

  onLoad(() => {
    console.log('onLoad');
    getAllMessage();
  });

  function getAllMessage() {
    queryMessage({
      merchantId: uni.getStorageSync('merchantId'),
    }).then((res) => {
      console.log(res, 'res <<<<<<');
      pageData.value = res.data;
      // pageData.value = {
      //   1: [],
      //   2: [],
      // };
    });
  }

  function setBarheight(height) {
    barHeight.value = height;
  }

  function goList(data) {
    userStore.messageData = data;
    uni.navigateTo({
      url: '/pages/message/list?type=' + data.type,
    });
  }
</script>

<style scoped lang="scss">
  .page {
    width: 100vw;
    min-height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    background-color: #f0f0f0;
  }

  .content {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }

  .list {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .img1 {
        display: flex;
        align-items: center;
        position: relative;
        width: 81rpx;
        height: 91rpx;
        vertical-align: middle;
        margin-right: 28rpx;

        .i {
          width: 81rpx;
          height: 91rpx;
          vertical-align: middle;
        }

        .badge {
          position: absolute;
          top: -4rpx;
          right: -14rpx;
          width: 28rpx;
          height: 28rpx;
          line-height: 28rpx;
          text-align: center;
          background-color: #fd2323;
          font-size: 18rpx;
          color: #ffffff;
          z-index: 1;
          border-radius: 50%;
        }
      }

      .img2 {
        position: relative;
        width: 85rpx;
        height: 60rpx;
        margin-right: 28rpx;

        .i {
          width: 85rpx;
          height: 60rpx;
          vertical-align: middle;
        }

        .badge {
          position: absolute;
          top: -14rpx;
          right: -14rpx;
          width: 28rpx;
          height: 28rpx;
          line-height: 28rpx;
          text-align: center;
          background-color: #fd2323;
          font-size: 18rpx;
          color: #ffffff;
          z-index: 1;
          border-radius: 50%;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100rpx;
        padding: 8rpx 0;
        box-sizing: border-box;
        .title {
          font-weight: 500;
          font-size: 26rpx;
          color: #1e2737;
        }

        .desc {
          font-size: 22rpx;
          color: #1e2737;
          opacity: 0.8;
        }
      }
    }
  }

  .no_message {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 230rpx;

    .img {
      width: 360rpx;
      height: 282rpx;
      vertical-align: middle;
    }

    .text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 44rpx;
      font-size: 26rpx;
      color: #1e2737;
      opacity: 0.8;
    }
  }
</style>
